<template>
  <article class="">
    <n-layout has-sider>
      <n-layout-sider
        collapse-mode="width"
        :collapsed-width="0"
        :width="240"
        show-trigger="arrow-circle"
        content-style="padding: 0px;"
        bordered
      >
        <p>
          <SysObjTree @select="onSelect"/>
        </p>
      </n-layout-sider>
      <n-layout-content content-style="padding: 0px;">
        <div class="ml-4">
          <SysObjTable ref="tableRef" :queryFormValue="queryForm" class="ml-4"></SysObjTable>
        </div>
      </n-layout-content>
    </n-layout>
  </article>
</template>

<script lang="ts" setup>
import SysObjTree from './SysObjTree.vue';
import SysObjTable from './SysObjTable.vue'
import { SlashAppContext } from 'slash-admin';
import { ref } from 'vue';

const queryForm = ref<any>({
  resourceAppCode: SlashAppContext.getRequest().appCode
});
const tableRef = ref<any>();
const onSelect = async (row: any) => {
  queryForm.value.fkSecurityObjId = row.id;
  setTimeout(() => {
    reloadTable();
  }, 50);
};

function reloadTable() {
  tableRef.value.reloadTable();
}
</script>

<style lang="less" scoped>
</style>